<script setup>
import {useWebInfo} from "@/store/webinfo.js";
import nullMixin from "@/mixins/null.js";
import {UserFilled} from "@element-plus/icons-vue";

const {nameIsNull} = nullMixin();
const webInfoStore = useWebInfo();
const {webInfo} = webInfoStore;
const day = ref();
const hours = ref();
const minute = ref();
const second = ref();
const runTime = () => {
  const timeOld = new Date().getTime() -
      new Date(1702500000000).getTime();
  const msPerDay = 24 * 60 * 60 * 1000;
  const daySold = Math.floor(timeOld / msPerDay);
  const time = new Date();
  day.value = daySold;
  hours.value = time.getHours();
  minute.value = time.getMinutes();
  second.value = time.getSeconds();
};

onMounted(() => {
  setInterval(runTime, 1000);
});
</script>

<template>
  <footer class="myBetween">
    <div class="content">
      <div class="site">
        <p class="myCenter">
          <img class="svg-icon" src="@/icons/svg/shandian.svg" alt="shandian">
          <span>
            本站居然运行了
            <strong>{{ day }}</strong> 天
            <strong>{{ hours }}</strong> 时
            <strong>{{ minute }}</strong> 分
            <strong>{{ second }}</strong> 秒
          </span>
        </p>
        <p class="p">
          Copyright©2023-2024
          <a href="https://gitee.com/cj222cj" target="_blank">{{ nameIsNull(webInfo.name) }}</a>
          <a href="#" target="_blank" style="margin-left: 10px;">{{ nameIsNull(webInfo.recordNum) }}</a>
        </p>
      </div>
      <div class="site-number">
        <span class="site_pv">
          <i class="iconfont icon-fangwenliang"></i>
          访问量
          <em class="pv_num">
            {{ nameIsNull(webInfo.siteAccess) }}
          </em>
        </span>
        <span class="site_uv">
          <el-icon style="position: relative; top: 2px;"><UserFilled/></el-icon>
          访客量
          <em class="uv_num">
            {{ nameIsNull(webInfo.visitorAccess) }}
          </em>
        </span>
      </div>
    </div>
  </footer>
</template>

<style scoped lang="less">
footer {
  position: relative;
  bottom: 0;
  width: 100%;
  height: 130px;
  background: rgba(255, 255, 255, 1);
  animation: bgSize 5s infinite ease-in-out alternate;

  .content {
    position: relative;
    margin: 0 auto;
    text-align: center;

    .site {
      margin-left: 10px;
      font-size: 14px;
      color: var(--text-color);

      p {
        margin: 10px 0;
      }

      a {
        text-decoration: none;
        color: var(--text-color);

        &:hover {
          color: var(--theme-color);
        }
      }
    }

    .site-number {

      i {
        display: inline-block;
        font-size: 12px;
      }

      .site_pv,
      .site_uv,
      .online_user {
        position: relative;
        display: inline-block;
        margin-right: 4px;
        height: 24px;
        padding-left: 10px;
        line-height: 24px;
        overflow: hidden;
        font-size: 12px;
        font-weight: 700;
        color: var(--background-color);
        background: var(--text-color1);
        border-radius: 5px;
      }

      .pv_num,
      .uv_num,
      .online_num {
        display: inline-block;
        font-size: 12px;
        padding: 0 15px;
      }

      .pv_num {
        background: linear-gradient(0deg, #d0339b, #d03336);
      }

      .uv_num {
        background: linear-gradient(0deg, #e2c63a, #f58044);
      }

      .online_num {
        background: linear-gradient(0deg, #367eda, #964fdb);
      }
    }
  }
}
</style>